import { lazyReportBatch } from '../report'
/**
* LCP：最大内容绘制时间
// 其中 startTime 就是我们要的绘制时间
LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。LCP 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
一个良好的 LCP 分数应该控制在 2.5 秒以内。

 * 数据类型怎么定义？
{
    "name": "",
    "entryType": "largest-contentful-paint",
    "startTime": 2630,
    "duration": 0,
    "size": 248800,
    "renderTime": 2630,
    "loadTime": 2543.800000011921,
    "firstAnimatedFrameTime": 0,
    "id": "",
    "url": "https://web.dev/static/articles/fcp/image/fcp-timeline-googlecom_856.png?hl=zh-cn"
}
 */
export default function observerLCP() {
	const entryHandler = (list) => {
		if (observer) {
			observer.disconnect()
		}
		for (const entry of list.getEntries()) {
			const json = entry.toJSON()
			console.log(json)
			const reportData = {
				...json,
				type: 'performance',
				subType: entry.name,
				pageUrl: window.location.href
			}
			// 发送数据 todo;
			lazyReportBatch(reportData)
		}
	}
	// 统计和计算lcp的时间
	const observer = new PerformanceObserver(entryHandler)
	// buffered: true 确保观察到所有paint事件
	observer.observe({ type: 'largest-contentful-paint', buffered: true })
}
